/* eslint-disable react/prop-types */
import { useState,useEffect } from 'react';
import {Modal ,Button,Input} from 'antd'
import dayjs from 'dayjs'
// showEditStaff ->isOpen
// staff->data
// staffData ->editData
// setStaffData->setEditData
// 解构props isOpen 是否显示打开，staff被编辑的用户信息，onOk确定回调，onCancel取消回调
function EditStaff({title,isOpen,data,onOk,onCancel}) {
  // 把传入的staff作为当前editData的默认值
  const [editData,setEditData] = useState(data);
  // 监听staff变化，更新editData的值（使用dayjs格式文本）
  useEffect(()=>{
    // 格式日期
    console.log("data",data);
    setEditData({...data,lastTime:dayjs(data.lastTime).format("YYYY-MM-DD HH:mm:ss")})
    
  },[data])
 
  return (<Modal title={title} 
  footer={null}
  open={isOpen} 
  onCancel={onCancel}>
       <div>
          
          id：<Input value={editData.id}  disabled/> <br />
          菜单名:<Input value={editData.name} onChange={e=>setEditData({...editData,name:e.target.value})}/>
          路径:<Input value={editData.path} onChange={e=>setEditData({...editData,path:e.target.value})}/><br/>
          组件:<Input value={editData.component} onChange={e=>setEditData({...editData,component:e.target.value})}/>
          
       </div>
  <Button 
  type='primary'
  onClick={()=>{
    onOk(editData)    
  }}>确定</Button>
      </Modal> );
}

export default EditStaff;